import React from "react";
import Chart from "echarts-for-react";
import PublicService from '../../../services/PublicService';
import request from '../../../utils/request';
import echarts from 'echarts'

class LeftBottomTU extends React.Component {

    constructor(props) {
        super(props)
        this.state={
            disList:{}
        }

    }


    componentWillReceiveProps(){
        this.onsave() 
    }
    
    onsave = () => {
        let data = {
            date:this.props.time
        }
        request({
            url: `/zhrq-web/gas/gaspandect/inventoryRankings`,
            method: 'POST',
            data:data
        }).then(data => {
            console.log(data)
            if(data.rc === 0) {
                this.setState({
                    disList:data.ret
                })
            }
        })
    }
    
   
    
    setOption  = () => {
        let data = this.state.disList
        return {
            tooltip: {
                trigger: 'axis',
                axisPointer: {type: 'cross'}
            },
         
            xAxis: [
                {
                    type: 'category',
                    data:  data.nameList
                }
            ],
            grid: {
                top:"10%",
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            yAxis: [
                {
                    type: 'value',
                   
                  
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
              
            ],
            series: [
              
                {
                   
                    type:'bar',
                    itemStyle:{normal:{color:'#99cccc'}},
                    data:data.valueList,
                    barWidth: '20%',
                    barGap:'0%',
                    barCategoryGap:'50%',
                    itemStyle:{
                        normal: {
                            show: true,
                            color: '#6FE2FF',
                            barBorderRadius:50,
                            borderWidth:0,
                            borderColor:'#333',
                        }
                    },
                },
                
               
            ]
        };

        

    }

    render() {
      
        return (

                 <Chart option={this.setOption()} notMerge lazyUpdate style={{height:"27vh"}}
                 echartsInstance={this.save}
                 />
          

         
           
          );
    }
   
}

export default LeftBottomTU;
